<ion-header>
  <div class="uh bc-head  ubb bc-f6" id="Header">
    <div class="ub ub-ac ubb bc-cc" id="top">
      <div class="" id="nav-left"></div>
      <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">圈子</h1>
      <div class="nav-btn" id="nav-right" (click)="add(1)">
        <div>
          <img src="assets/imgs/img/jiaguanzhu_red.png" />
        </div>
        <div>
          战友
        </div>
      </div>
    </div>
    <div id="nav" class="ub">
      <div class="ub-f1" (click)="navSelected('group')"  [ngClass]="{'act':group }">
        战团
      </div>
      <div class="ub-f1" (click)="navSelected('userDTlist_select')"  [ngClass]="{'act':userDTlist_select }">
        动态
      </div>
      <div class="ub-f1" (click)="navSelected('haoyou')"  [ngClass]="{'act':haoyou }">
        战友
      </div>
    </div>
  </div>
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新..." refreshingSpinner="circles" refreshingText="请稍等...">
    </ion-refresher-content>
  </ion-refresher>
  <div data-control="CONTENT">
    <div class="scrollbox ">
      <div class="content">
        <!-- 小组 -->
        <div id="group" class="contentpage" *ngIf="group">
          <ul class="xingqugroup bc-wihte">
            <div class="ub ub-ac  umh5 chuangjian">
              <div class="ub ub-f1">
                我的兴趣组
              </div>
              <div class="ub ub-ac">
                <img src="assets/imgs/img/jiaguanzhu_red.png" >
                <div class="color-red" id="chuangjian" (click)="add(2)">创建</div>
              </div>
            </div>
            <div id="grouplist">
              <li *ngFor="let item of grouplist" class="ub ub-ac ub-pj ubb bc-border" (click)="openGroupListDetial(item)">
                <div class="ub ub-ac ub-f1">
                  <div class="touxiang">
                    <img src="{{item.LogoUrl | imgUrl:'DynamicUrl':'morenimg'}}" />
                  </div>
                  <div class="ub-f1">
                    <h4 class="texthide"> {{item.Title}} </h4>
                    <div class="jieshao">{{item.MemberNum}} 成员 </div>
                  </div>
                </div>
                <div class="fa fa-angle-right ulev2 color-999"></div>
              </li>
            </div>
          </ul>
          <ul class="bc-wihte yaoqing">
            <div> 待加入小组 </div>
            <div id="yaoqinglist">
              <li class="ub ub-ac ub-pj" *ngFor="let item of yaoqinglist">
                <div class="ub ub-ac ub-f1">
                  <div class="touxiang" >
                    <img  src="{{item.img | imgUrl:'HeadportraitUrl':'imgmoren'}}" /> </div>
                  <div>
                    <div> {{item. ApplyName}} </div>
                    <div class="jieshao"> 邀请我加入 {{item.GroupName}} </div>
                  </div>
                </div>
                <div class="bor_red jiaru" (click)="agreeJoinGroup(item)"> 去加入 </div>
              </li>
            </div>
          </ul>
        </div>
        <!-- 动态 -->
        <div id="userDTlist_select" class="contentpage" *ngIf="userDTlist_select">

          <div id="userDTlist_item" *ngFor="let item of userDTlist" >
            <div class="bc-head pad_left7 pad_right7 mar_b5">
              <div (click)="openDy_detial(item)">
                <div class="ub ub-ac height6">
                  <div class="ub-img1 dongtai_imgHead_wh">
                    <img src="{{item.HeadPortrait | imgUrl:'HeadportraitUrl'}}" />
                  </div>
                  <div class="ub umar-l ub-ver umh5">
                    <div class="ub ub-ac ub-f1 ">
                      {{item.username}}
                    </div>
                    <div class="ub ub-ac ub-f1 fontcolor999">
                      {{item.CreateDate*1000 | date:"yyyy-MM-dd hh:mm"}}
                    </div>
                  </div>
                </div>
                <div class="ub">
                  <img ng-if="PicUrl" class="umar-r" style="height: 5em;" src="{{item.PicUrl | imgUrl:'DynamicUrl'}}" />
                </div>
                <div class="umh4 bc-border word_break"> {{item.Describe}} </div>
              </div>
            </div>
            <div class="ub ub-ac umh5 fontcolor999" >
              <div class="ub-img  dianzan_wh mar_r5" [ngClass]="{'dianzan_img': true,'dianzan1_img': false}" (click)="dianzan(item)"></div>
              <div class="mar_r15"> {{item.FollowNum}}
              </div>
              <div class="ub-img pinglun_img dianzan_wh mar_r5" (click)="openDy_detial(item)"></div>
              <div class="mar_r15">{{item.ReplyNum}}
              </div>
              <div class="ub-img dashang_img dianzan_wh" (click)="dashang(item)"></div>
              <div class="ub-f1"></div>
              <div class="ub-img threeimg_wh jvbao_img1 mar_r5" (click)="jvbao_dy(4,item,'举报动态')"></div>
            </div>
          </div>

        </div>
        <!-- 好友 -->
        <div id="haoyou" class="contentpage" *ngIf="haoyou">
          <div class="search bc-wihte ub ub-ac">
            <div class=" uinput ub ub-f1 ub-ac  ">
              <div class="fa fa-search sc-text"></div>
              <input onkeyup="this.value=this.value.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g,'')" placeholder="搜索战友" id="txt_cf"
                type="text" class="ub-f1">
            </div>
            <div id="sousuo_cfriend">
              搜索
            </div>
          </div>
          <div id="friendlist" class="bc-wihte">
            <li class="ub ub-ac ub-pj ubb bc-border" *ngFor="let item of friendlist" id="{{item.RelationUserID}}_li">
              <div class="ub ub-ac">
                <div class="touxiang">
                  <img (click)="openUserDetial(item.RelationUserID)" src="{{headimg | imgUrl:'HeadportraitUrl'}}" />
                </div>
                <div>
                  <div>{{item.RelationUser}}</div>
                  <div class="jieshao">{{item.RelationUser}}</div>
                </div>
              </div>
              <div class="duihao_hot">
                <ng-container *ngIf="item.IsEachOther; else elseTemplate">
                  <img class="addfrieng_wh" id="{{item.RelationUserID}}_f" (click)="Btn_addf(item)" src="assets/imgs/my/duihao.png" />
                </ng-container>
                <ng-template #elseTemplate>
                  <img class="addfrieng_wh" id="{{item.RelationUserID}}_f" (click)="Btn_addf(item)" src="assets/imgs/my/hufen_03.png" />
                </ng-template>
              </div>
            </li>
          </div>
        </div>
      </div>
    </div>
  </div>
</ion-content>
